import {View} from '@tarojs/components'
import React, {useState, useEffect} from 'react'
import {EChart} from '../echarts-taro3-react'
import echarts from '../echarts-taro3-react/ec-canvas/echarts.js'
/**折线图表  */
export const LineChart: React.FC<{
  data?: {startTime: string; endTime: string}
}> = ({data}): JSX.Element => {
  const [ecahrt, setEchart] = useState<any>(null)
  const refChart = (chart: any) => setEchart(chart)
  useEffect(() => {
    console.log('LineChart useEffect 图表数据发生变化', ecahrt)
    let data = [
      ['2022-07-15 00:00:00', 120],
      ['2022-07-15 00:30:00', 120],
      ['2022-07-15 02:00:00', 200],
      ['2022-07-15 02:30:00', 200],
      ['2022-07-15 04:00:00', 150],
      ['2022-07-15 04:30:00', 150],
      ['2022-07-15 06:00:00', 80],
      ['2022-07-15 06:30:00', 80],
      ['2022-07-15 08:00:00', 70],
      ['2022-07-15 08:30:00', 70],
      ['2022-07-15 10:00:00', 110],
      ['2022-07-15 12:00:00', 130],
      ['2022-07-15 14:00:00', 150],
      ['2022-07-15 16:00:00', 80],
      ['2022-07-15 18:00:00', 70],
      ['2022-07-15 20:00:00', 110],
      ['2022-07-15 22:00:00', 130],
      ['2022-07-15 24:00:00', 130]
    ]
    const defautOption = {
      aria: {
        enabled: true,
        decal: {
          show: true
        }
      },
      grid: {
        top: '14%',
        right: '10%',
        bottom: '16%',
        left: '10%'
      },
      xAxis: {
        type: 'category',
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 3,
          fontSize: 10,
          fontColor: '#595959',
          formatter: function (value: any, idx: number) {
            const date = new Date(value)
            const dateMonth = date.getMonth() + 1
            const dateDate = date.getDate()
            const dateHours = date.getHours()
            // 判断一个刻度值是否是第一个数据的日期
            if (idx === 0) {
              return `{date|${dateMonth}月${dateDate}日}`
            } else {
              return `{hour|${dateHours <= 9 ? `0${dateHours}` : dateHours}:00}`
            }
          },
          rich: {
            date: {
              fontWeight: 'bold'
            },
            hour: {
              fontWeight: 'normal'
            }
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          fontSize: 10
        }
      },
      series: [
        {
          showSymbol: true,
          symbol: value => {
            if (value[1] === 200) return 'circle'
            return 'emptyCircle'
          },
          symbolSize: value => {
            if (value[1] === 200) return 6
            return 4
          },
          data: data,
          type: 'line',
          lineStyle: {
            with: 1,
            color: 'rgb(15, 138, 249)'
          },
          itemStyle: {
            color: params => {
              if (params.value[1] === 200) return '#fff'
              return 'rgb(15, 138, 249)'
            },
            borderWidth: 2,
            borderColor: 'rgb(248, 106, 107)'
          },
          areaStyle: {
            // @ts-ignore
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(205, 240, 255)'
              },
              {
                offset: 1,
                color: 'rgb(255,255,255)'
              }
            ])
          }
        }
      ]
    }
    ecahrt && ecahrt.refresh(defautOption)
  }, [data])
  return (
    <View className="h-156">
      <EChart ref={refChart} canvasId="paramAnalyse"></EChart>
    </View>
  )
}

/**饼状图表  */
export const PieChart: React.FC<{
  data?: {startTime: string; endTime: string}
}> = ({data}): JSX.Element => {
  const [ecahrt, setEchart] = useState<any>(null)
  const refChart = (chart: any) => setEchart(chart)
  useEffect(() => {
    console.log('PieChart useEffect 图表数据发生变化', ecahrt)
    const defautOption = {
      color: ['#1dc79c', '#f86a6b', '#ffd314'],
      series: [
        {
          type: 'pie',
          radius: ['70%', '100%'],
          label: {
            show: true,
            position: 'center',
            fontSize: 16,
            fontWeight: 'bold'
          },
          labelLine: {
            show: false
          },
          data: [
            {value: 96, name: '99%'},
            {value: 2, name: '2%'},
            {value: 2, name: '2%'}
          ]
        }
      ]
    }
    ecahrt && ecahrt.refresh(defautOption)
  }, [data])
  return (
    <View className="w-99 h-99">
      <EChart ref={refChart} canvasId="ParamRatio"></EChart>
    </View>
  )
}

export const ChartLegend: React.FC = (): JSX.Element => {
  return (
    <View className="h-full flex flex-col justify-end">
      <View className="w-34 h-15 flex justify-center items-center">
        <View className="w-6 h-6 mr-6 bg-danger"></View>
        <View className="text-11 text-xx_text">偏高</View>
      </View>
      <View className="w-34 h-15 flex justify-center items-center">
        <View className="w-6 h-6 mr-6 bg-warning"></View>
        <View className="text-11 text-xx_text">偏低</View>
      </View>
      <View className="w-34 h-15 flex justify-center items-center">
        <View className="w-6 h-6 mr-6 bg-success"></View>
        <View className="text-11 text-xx_text">正常</View>
      </View>
    </View>
  )
}
